<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { usePublicHooks } from "@/views/hooks";
const { switchStyle } = usePublicHooks();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "",
    content: "",
    isFeaturedOnHome: null
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-position="top"
    label-width="110px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="公告名称" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入公告名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="newFormInline.content"
            type="textarea"
            :rows="8"
            clearable
            placeholder="请输入公告内容"
          /> </el-form-item
      ></re-col>
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="有效状态" prop="EnabledMark">
          <el-select
            v-model="newFormInline.EnabledMark"
            placeholder="请选择状态"
          >
            <el-option label="允许" :value="0" />
            <el-option label="禁止" :value="1" />
          </el-select> </el-form-item
      ></re-col> -->
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label="是否首页滚动"
          prop="isFeaturedOnHome"
          label-position="left"
        >
          <el-switch
            v-model="newFormInline.isFeaturedOnHome"
            active-text="是"
            inactive-text="否"
            inline-prompt
            :style="switchStyle"
          /> </el-form-item
      ></re-col>
      <!-- <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注">
          <el-input
            v-model="newFormInline.Description"
            placeholder="请输入备注信息"
            type="textarea"
          /> </el-form-item
      ></re-col> -->
    </el-row>
    <!-- <el-form-item v-if="newFormInline.releasetime" label="发布时间">
      <el-date-picker
        v-model="newFormInline.releasetime"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        type="date"
        placeholder="请选择发布时间"
        style="width: 250px"
      />
    </el-form-item> -->
  </el-form>
</template>
